<!-- 申请体验表 -->
<template>
    <div class="boxs margin_top">
        <headers></headers>
        <div class="contents" :class="!ismobile ? 'ispc ' : 'ismobiles'">
            <div class="title">体验资格申请表</div>
            <ul>
                <li>
                    <div class="zititle">1:您是通过什么方式知道我们的？</div>
                    <div class="group">
                        <van-radio-group v-model="postitem.reference_source">
                            <div class="radios">
                                <van-radio name="朋友推荐" checked-color="#07c160">朋友推荐</van-radio>
                            </div>
                            <div class="radios">
                                <van-radio name="自我搜索" checked-color="#07c160">自我搜索</van-radio>
                            </div>
                            <div class="radios">
                                <van-radio name="微信视频号" checked-color="#07c160">微信视频号</van-radio>
                            </div>
                            <div class="radios">
                                <van-radio name="站酷" checked-color="#07c160">站酷</van-radio>
                            </div>
                        </van-radio-group>
                    </div>
                    <p class="redwored" v-if="hasclick && !postitem.reference_source"><span
                            class="iconfont icon-tishi"></span>请选择渠道</p>
                </li>
                <li>
                    <div class="zititle">2:您的邮箱（后期资讯更新通知）</div>
                    <input class="input" v-model="postitem.email" type="text" placeholder="请输入常用的邮箱号码" />
                    <p class="redwored" v-if="hasclick && !postitem.email"><span class="iconfont icon-tishi"></span>请输入您的邮箱
                    </p>
                </li>
                <li>
                    <div class="zititle">3.您的手机号码或其他联系方式</div>
                    <input class="input" v-model="postitem.contact_info" type="text" placeholder="手机号码或微信及QQ" />
                    <p class="redwored" v-if="hasclick && !postitem.contact_info"><span
                            class="iconfont icon-tishi"></span>请输入您的联系方式</p>
                    <p>建议填写真实信息，否则后期可能会无法使用体验资格及代理权限！</p>
                </li>
                <li>
                    <div class="zititle">4.您的称呼</div>
                    <input class="input" v-model="postitem.name" type="text" placeholder="建议填写真实信息以便反馈" />
                    <p class="redwored" v-if="hasclick && !postitem.name"><span class="iconfont icon-tishi"></span>请输入您的称呼
                    </p>
                </li>
                <li>
                    <div class="zititle">5.您使用此系统的用途</div>
                    <input class="input" v-model="postitem.purpose" type="text" placeholder="建议填写真实信息以便反馈" />
                    <p class="redwored" v-if="hasclick && !postitem.purpose"><span
                            class="iconfont icon-tishi"></span>请输入您使用此系统的用途</p>
                </li>
                <li>
                    <div class="zititle">6.特邀码</div>
                    <input class="input" type="text" placeholder="特邀码" />
                </li>
                <li>
                    <div class="btn shouzhi" @click="postapplay">提交</div>
                </li>

            </ul>
        </div>
        <bottoms></bottoms>
    </div>
</template>

<script>


import Swiper from 'swiper'
import 'swiper/css/swiper.min.css'
import { WOW } from "wowjs";
import bottoms from "./modle/bottoms.vue"
import headers from "./modle/headers.vue"
import { Toast } from 'vant';
export default {
    name: 'HelloWorld',
    components: {
        headers,
        bottoms,
    },
    data() {
        return {
            hasclick: false,
            postitem: {
                "reference_source": "朋友推荐",
                "email": "",
                "contact_info": "",
                "name": "",
                "purpose": ""
            },
            radio: 1,
            ismobile: false
        }
    },
    methods: {
        postapplay() {
            this.isMobile()
            let ismobile = this.isMobile()
            if (!ismobile) {
                this.hasclick = true
            }
            if (this.postitem.reference_source == "") {
                if (ismobile) { Toast.fail('请选择渠道'); }
                return
            }
            if (this.postitem.email == "") {
                if (ismobile) { Toast.fail('请输入您的邮箱'); }
                return false
            }
            if (this.postitem.contact_info == "") {
                if (ismobile) { Toast.fail('请输入您的联系方式'); }
                return false
            }
            if (this.postitem.name == "") {
                if (ismobile) { Toast.fail('请输入您的称呼'); }
                return false
            }
            if (this.postitem.purpose == "") {
                if (ismobile) { Toast.fail('请输入您使用此系统的用途'); }
                return false
            }
            this.$api.post(
                "/api/PortalHome/add_experience_qualification_application",
                this.postitem,
                r => {
                    Toast.success('申请成功');
                    this.$router.go(-1)

                },
                f => {
                    Bus.$emit("addMessgeImg", { code: 1, info: "获取数据失败" });
                }
            );
        },
    },
    mounted() {
        this.ismobile = this.isMobile()
        let that = this;
        window.addEventListener('resize', function () {
            that.ismobile = that.isMobile()
        });
    }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.icon-tishi {
    margin-right: 0.3rem;
}

.redwored {
    color: red !important;
}

.btn {
    width: 100%;
    line-height: 3rem;
    background-color: #268bd2;
    color: #fff;
    text-align: center;
    border-radius: 5rem;
    margin-top: 3rem;
    margin-bottom: 3rem;
}

.input {
    border: none;
    border-bottom: solid 1px #f8f5f5;
    line-height: 2.3rem;
    margin-top: 0.4rem;
    width: 100%;
}

.group {
    overflow: hidden;
    margin-top: 0.4rem;

    .radios {
        width: 10rem;
        margin-top: 0.4rem;
    }

    .radios:nth-child(3) {
        clear: both;
    }
}

.radios {
    float: left;
}

ul {
    padding: 0;
    margin: 0;
    padding: 0 2rem;

    li {
        list-style: none;
        padding: 0;
        margin: 0;

        p {
            color: #dc322f;
            font-size: 0.8rem;
            margin-top: 0.3rem;
        }
    }
}

.boxs {
    width: 100%;
    height: 100%;
    background: #fff;
    overflow: hidden;
    position: relative;

    .margin_top {
        margin-top: 6rem;
    }
}

.title {
    font-size: 1.3rem;
    text-align: center;
    font-weight: bold;
    margin-top: 4rem;
}

.zititle {
    font-size: 1rem;
    margin-top: 2rem;
}

.ispc {
    background: rgba(0, 0, 0, 0.03);
    padding: 3rem;
    box-sizing: border-box;
    margin: 0 auto;
    margin-top: 9rem;
    margin-bottom: 5rem;
    width: 400px;
}
</style>
